<template>
	<view class="news-item" @click="onItemClick">
		<view v-if="type === 1" class="item-1">
			<view class="left">
				<text>{{ data.title }}</text>
				<view class="bottom">
					<text>{{ data.date }}</text>
					<text>{{ data.author_name}}</text>
				</view>
			</view>
			<image class="right" :src="data.thumbnail_pic_s" mode="aspectFill"></image>
		</view>
		<view v-else class="item-2">
			<view class="hd">
				<text>{{ data.title }}</text>
			</view>
			<view class="ct">
				<image :src="data.thumbnail_pic_s" mode="aspectFill"></image>
				<image :src="data.thumbnail_pic_s02" mode="aspectFill"></image>
				<image :src="data.thumbnail_pic_s03" mode="aspectFill"></image>
			</view>
			<view class="ft">
				<text>{{ data.date }}</text>
				<text>{{ data.author_name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "newsItem",
		props: {
			type: {
				type: Number,
				default: 1
			},
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
			
			};
		},
		methods: {
			onItemClick() {
				this.$emit('onItemClick', this.data);
			}
		}
	}
</script>

<style lang="scss">
	.news-item {
		// height: 100px;
		margin: 10px;
		box-sizing: content-box;
		border-bottom: 0.5px solid #ccc;

		.item-1 {
			display: flex;
			justify-content: space-between;
			height: 100%;
			padding-bottom: 5px;
			box-sizing: border-box;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 70%;
				padding-right: 10px;
				font-size: 14px;
				.bottom {
					text-align: left;
					font-size: 13px;
					:nth-child(2) {
						padding-left: 5px;
					}
				}
			}

			.right {
				width: 30%;
				height: 100%;
			}
		}

		.item-2 {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			.hd {
				font-size: 14px;
			}

			.ct {
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
				image {
					width: 31%;
					height: 60px;
				}
			}

			.ft {
				padding-bottom: 5px;
				text-align: left;
				font-size: 13px;
				
				:nth-child(2) {
					padding-left: 5px;
				}
			}
		}
	}
</style>
